<script setup>

import BgContainer from "./components/BgContainer.vue";
import StudyFrame from "./components/StudyFrame.vue";
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getNewsAPI} from "../../api/resourceApi.js";

const router = useRouter()
const importNews = ref([])
const symposiaList = [
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202304/W020230424461962648359.jpg"
  },
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202303/W020230424463654342154.jpg"
  },
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202010/W020201013446454041949.jpg"
  },
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202002/W020200215769497715470.jpg"
  },
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202302/W020230216408933956168.jpg"
  }
  ,
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202203/W020220314386727806292.jpg"
  }
  ,
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202107/W020210723779290529816.jpg"
  },
  {
    background: "https://www.ccps.gov.cn/xwpd/ztjj/202107/W020210723779290529816.jpg"
  }
]
const books = [
  {
    image:"https://www.ccps.gov.cn/dxsj/202307/W020230713555937251442.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202403/W020240305365996537703.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202401/W020240111615778052598.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202401/W020240111611876559724.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202312/W020231228638205374574.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202311/W020231122396346649575.jpg"
  },
  {
    image:"https://www.ccps.gov.cn/dxsj/202311/W020231109400397792772.jpg"
  },
]


const toSymposiaPage = () => {
  router.push({
    path: "/symposia"
  })
}

const toPeriodicalPage = () => {
  router.push({
    path: "/periodical"
  })
}

const toJournalismPage = () => {
  console.log("toJournalismClick")
  router.push({
    path: "/journalism"
  })
}

const toReadPage = () => {
  router.push({
    path: "/reader"
  })
}

const getImportantNews = async () => {
  const res = await getNewsAPI(2)
  importNews.value = res.data
}

const toArticlePage = (id) => {
  router.push({
    path: "/article",
    query: {
      id
    }
  })
}

onMounted(() => {
  getImportantNews()
})

</script>

<template>
  <div class="center">
    <div class="main">

      <!--            三会一课部分-->
      <section class="theory-section">
        <div class="data-title-1">三会一课</div>
        <!--            图片-->
        <div class="three-meetings-img"></div>
      </section>

      <BgContainer title="专题精选">
        <template #left-decoration>
          <div class="data-decoration data-decoration-3">
          </div>
        </template>

        <template #right-decoration>
          <div class="data-decoration data-decoration-4">
          </div>
        </template>

        <template #content>
          <ul class="data_picked-module">
            <!--                    这里list一行四个，自动换行-->
            <li class="data_picked-list" v-for="item in symposiaList" :style="{'background-image':`url('${item.background}')`}" @click="toSymposiaPage">
            </li>
          </ul>
        </template>

      </BgContainer>

      <BgContainer title="党建要闻">
        <template #more>
          <div class="data-more data-more-1" @click="toJournalismPage">更多>>></div>
        </template>
        <template #content>
          <ul class="data-news-module">
            <li class="data-news-list" v-for="item in importNews" @click="toArticlePage(item.id)">
              <p>{{ item.title }}</p>
            </li>

          </ul>
        </template>
      </BgContainer>

      <BgContainer title="党建期刊">
        <template #left-decoration>
          <!--    标题旁边装饰物-->
          <div class="data-decoration data-decoration-1">
          </div>
        </template>

        <template #right-decoration>
          <div class="data-decoration data-decoration-2" @click="toPeriodicalPage">
          </div>
        </template>

        <template #content>
          <div class="data-periodical-item">

            <!--                    左右按动按钮svg-->
            <div class="data-button-svg data-button_left-svg">
            </div>
            <div class="data-button-svg data-button_right-svg">
            </div>
            <ul class="data-periodical-module">
              <li class="data-periodical-list" v-for="item in books" :style="{'background-image':`url('${item.image}')`}" @click="toReadPage">
              </li>
            </ul>
          </div>
        </template>
      </BgContainer>

      <!--      <BgContainer title="党建学习">-->
      <!--        <div class="data-study-item">-->
      <!--          <StudyFrame title="党建文化">-->
      <!--            <template #content>-->
      <!--              <ul class="data-news-module">-->
      <!--                <li class="data-study-list" v-for="i in 6">-->
      <!--                  <p class="data-study-subheading">“十四冬”绽放冰雪梦想</p>-->
      <!--                </li>-->
      <!--              </ul>-->
      <!--            </template>-->
      <!--            <template #more>-->
      <!--              <div class="data-more data-more-2">更多>>></div>-->
      <!--            </template>-->
      <!--          </StudyFrame>-->
      <!--          <StudyFrame title="党建文化">-->
      <!--            <template #content>-->
      <!--              <ul class="data-news-module">-->
      <!--                <li class="data-study-list" v-for="i in 6">-->
      <!--                  <p class="data-study-subheading">多维度认识毛泽东同志的实事求是思想</p>-->
      <!--                </li>-->
      <!--              </ul>-->
      <!--            </template>-->
      <!--            <template #more>-->
      <!--              <div class="data-more data-more-2">更多>>></div>-->
      <!--            </template>-->
      <!--          </StudyFrame>-->

      <!--          <StudyFrame title="党建视频">-->
      <!--            <template #content>-->
      <!--              <div class="data-study-video">-->

      <!--              </div>-->
      <!--              <div class="data-video-introduce">《国史讲堂》——“党史微课”系列短视频</div>-->
      <!--            </template>-->
      <!--            <template #more>-->
      <!--              <div class="data-more data-more-2">更多>>></div>-->
      <!--            </template>-->
      <!--          </StudyFrame>-->
      <!--        </div>-->
      <!--      </BgContainer>-->

      <!--            党建学习部分-->
      <section class="theory-section" >
        <div class="data-title-2">党建学习</div>
        <div class="data-study-item" style="padding-bottom: 10px">
          <div class="data-study-frame">
            <div class="data-study-caption">
              党建文化
            </div>
            <ul class="data-news-module">
              <li class="data-study-list" v-for="i in 6">
                <p class="data-study-subheading">多维度认识毛泽东同志的实事求是思想</p>
              </li>
            </ul>

            <!--     这里data-more和党建要闻的更多样式一致，只是位置不同 -->
            <div class="data-more data-more-2">更多>>></div>
          </div>
          <div class="data-study-frame">
            <div class="data-study-caption">
              党建文化
            </div>
            <ul class="data-news-module">
              <li class="data-study-list" v-for="i in 6">
                <p class="data-study-subheading">“十四冬”绽放冰雪梦想</p>
              </li>
            </ul>
            <div class="data-more data-more-2">更多>>></div>
          </div>
          <div class="data-study-frame">
            <div class="data-study-caption">
              党建视频
            </div>
            <div class="data-study-video">

            </div>
            <div class="data-video-introduce">《国史讲堂》——“党史微课”系列短视频</div>
            <div class="data-more data-more-2">更多>>></div>

          </div>

        </div>
      </section>
    </div>
  </div>
  <!--  </div>-->
</template>

<style scoped>
.center {
  width: 100%;
  background-color: rgba(229, 229, 229, 1);
  margin: 0 auto;
  letter-spacing: 3px;
  padding: 0.5rem 0;
  /*间隙*/
}

.main {
  width: 108rem;
  /*height:50rem;*/
  background-color: rgba(255, 255, 255, 1);
  margin: 0 auto;
}

/*这是党建模块公共部分*/
.theory-section {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*三会一课部分*/
.data-title-1 {
  text-align: center;
  font-size: 3.6rem;
  color: rgba(156, 0, 0, 1);
  font-weight: 700;
  padding-top: 1rem;
}

.three-meetings-img {
  width: 100rem;
  height: 32rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  margin: 0 auto;
  margin-top: 1.5rem;
  background-image: url("src/assets/images/three-meeting-img.webp");
}

/*专题精选部分*/

.data-title-2 {
  margin: 0 auto;
  width: 10rem;
  height: 3.5rem;
  font-weight: 700;
  text-align: center;
  font-size: 2rem;
  color: rgba(156, 0, 0, 1);
  margin-bottom: 1.5rem;
  margin-top: 3rem;
  border-bottom: 3.5px solid rgba(156, 0, 0, 1);
}

.data_picked-module {
  display: flex;
  justify-content: left;
  width: 100%;
  height: 25rem;
  flex-wrap: wrap;
  padding: 0rem 2rem;
}

.data_picked-list {
  width: 24rem;
  height: 10rem;
  list-style: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-top: 1.5rem;
  /*background-image: url("src/assets/images/picked-img.png");*/
}

.data_picked-list:not(:nth-child(4n)) {
  margin-right: 2.5rem;
}


/*///////////////////////////////////*/
/*党建要闻部分*/


.data-news-module {
  width: 100%;
  padding-left: 4rem;
}

.data-news-list {
  padding-top: 2px;
  height: 3.5rem;
  list-style-type: disc;
  line-height: 3.5rem;
}

.data-news-list::marker, .data-study-list::marker {
  color: rgba(156, 0, 0, 1);
  font-size: 1.4rem;
}

.data-news-list:not(:first-child), .data-study-list:not(:first-child) {
  margin-top: 1rem;
}

.data-news-list p {
  /*background-color: yellow;*/
  letter-spacing: 1px;
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 1);
}

/*////////////////////////*/
/*党建期刊部分*/

.data-title-2 {

}

.data-periodical-item {
  height: 22.5rem;
  padding: 1.5rem 4.5rem;
  position: relative;
}

.data-button-svg {
  position: absolute;
  top: 9rem;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  background-size: 3rem 3rem;
  background-position: center;
}

.data-button_left-svg {
  left: 1rem;
  background-image: url("src/assets/svg/data-button_left.svg");
}

.data-button_right-svg {
  right: 1rem;
  background-image: url("src/assets/svg/data-button_right.svg");

}

.data-periodical-module {
  display: flex;

}

.data-periodical-list {
  list-style: none;
  width: 12.5rem;
  height: 18rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("src/assets/images/data-periodical-img.png");


}

.data-periodical-list:not(:first-child) {
  margin-left: 2rem;
}


/*党建学习部分*/


.data-study-item {
  display: flex;
  justify-content: space-around;
}


.data-study-caption {
  width: 10rem;
  height: 2.6rem;
  line-height: 2.6rem;
  font-size: 1.4rem;
  color: rgba(156, 0, 0, 1);
  font-weight: bolder;
  text-align: center;
  border-left: 4px solid rgba(156, 0, 0, 1);
  background-color: lightskyblue;
}

.data-news-module {

}

.data-study-list {
  margin-top: 1.5rem;
}

.data-study-subheading {
  letter-spacing: 1px;
  font-size: 1.2rem;
}

/*更多*/
.data-more {
  position: absolute;
  top: 2rem;
  color: rgba(166, 166, 166, 1);
  font-size: 1.2rem;
  letter-spacing: 0px;
  cursor: pointer;
}

.data-more-1 {
  right: 7rem;
}

.data-more-2 {
  right: 2rem;
}

.data-study-video {
  width: 27rem;
  height: 12rem;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("src/assets/images/data-video.png");
  margin-top: 1.5rem;
}

.data-video-introduce {
  font-size: 1.4rem;
  color: rgba(156, 0, 0, 1);
  font-weight: bolder;
  letter-spacing: 0px;
  text-align: center;
  margin-top: 1.5rem;
}

/*标题旁边装饰部分*/
.data-decoration {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
}

/*党建期刊装饰*/
.data-decoration-1 {
  left: 3rem;
  height: 8rem;
  width: 10rem;
  /*height:12rem;*/
  top: -1.5rem;
  background-position: center;
  background-image: url("src/assets/images/data-dec-1.png");
  /*10*/
}

.data-decoration-2 {
  height: 15rem;
  width: 13rem;
  right: 3rem;
  background-image: url("src/assets/images/data-dec-2.png");
  background-size: contain;
  /*width:5rem;*/
  top: -5.5rem;
  /*24*/
}

/*专题精选部分装饰*/
.data-decoration-3, .data-decoration-4 {
  width: 10rem;
  height: 5rem;
  top: -1rem;
  background-size: contain;

}

.data-decoration-3 {
  left: 30rem;
  background-image: url("src/assets/svg/data-svg-3.svg");
}

.data-decoration-4 {
  background-image: url("src/assets/svg/data-svg-4.svg");
  right: 30rem;
}

</style>
